<template>
  <div class="content">
    <p>猜你喜欢</p>
    <div class="nav">
        <div class="sort">综合排序</div>
        <div class="distance">距离最近</div>
        <div class="sales">销量最高</div>
        <div class="screen">筛选</div>
    </div>
    <div class="opts">
        <div class="opt">年货节热卖</div>
        <div class="opt">津贴联盟</div>
        <div class="opt">满减优惠</div>
        <div class="opt">品质联盟</div>
    </div>
    <div class="list">
        <div class="item" v-for="(item,index) in list" :key="index">
            <div class="left">
                <img :src="item.picUrl" alt="">
            </div>
            <div class="right">
                <div class="name">
                    {{item.name}}
                </div>
                <div class="count">
                    <!-- 月售{{item.count}} -->
                </div>
                <div class="show">
                    <div class="desc">
                        <!-- {{item.desc}} -->
                    </div>
                    <div class="time">
                        <!-- {{item.time}}分钟 -->
                    </div>
                    <div class="distance">
                        {{item.distance}}
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { shop_list } from "../api/index";
export default {
    data(){
        return {
            list:[]
        }
    },
    methods:{
        
    },
    mounted() {
    shop_list({}).then((res) => {
        // console.log(res.data.list);
      this.list = res.data.list;
    });
  }, 
}
</script>

<style scoped>
.content{
    height: 330px;
    padding: 0 10px;
}
p{
    height: 30px;
    font-weight: 700;
}
.nav{
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.opts{
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 10px;
    /* background-color: red; */
}
.opt{
    padding: 5px 10px;
    background-color: rgba(220, 220, 220, 0.595);
}
.item{
    height: 120px;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
}
.left{
    width: 80px;
    height: 80px;
    margin-right: 10px;
}
img{
    width: 100%;
    height: 100%;
}
.right{
    flex: 1;
    font-size: 12px;
    color: rgb(98, 92, 92);
    line-height: 30px;
}
.name{
    font-weight: 700;
    font-size: 14px;
    color: black;
}
.show{
    display: flex;
    justify-content: space-between;
}
</style>